<template>
	<view class="info u-p-t-12">
		<view class="info-mask">
			<view class="info-mask-box"></view>
		</view>
		<view class="u-text-center u-p-b-20">
			<view class="flex-center-center">
				<view class="shop-avatar clear-flex">
					<image :src="showImage(shopInfo.logoImgUrl)" class="auto-img"></image>
				</view>
			</view>
			<view class="u-f-36 u-lh-50 font-medio">{{ shopInfo.name }}</view>
			<view class="u-m-t-10 u-f-30 u-lh-42 color-grew" style="margin: 0 auto;width: 400rpx;">{{ formatAddress(shopInfo) }}</view>
		</view>
		
		<view style="border-top: 2rpx solid rgba(151,151,151, .12);">
			<view
			v-for="(item, index) in infos"
			:key="index"
			@click="infoClick(item)"
			>
				<view
				class="flex-center-between"
				:style="{
					padding: '20rpx 0',
					margin: '0 40rpx',
					borderTop: `${ index ? 2 : 0 }rpx solid rgba(151,151,151, .12)`
				}"
				>
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop[item.labelKey] }}</view>
					<view class="u-f-30 u-lh-42 color-grew">
						<template v-if="item.type === 'more'">
							<x-see-more></x-see-more>
						</template>
						<template v-else>{{ dealTextShow(item) }}</template>
					</view>
				</view>
				
				<view v-if="item.key === 'environmentImgUrls'" class="u-p-t-12">
					<scroll-view
					scroll-x
					style="height: 200rpx; width: 100vw;"
					>
						<view class="flex-center u-p-l-40">
							<view
							v-for="(item, index) in environmentImgUrls"
							:key="index"
							class="u-radius-6 en-pic nowrap clear-flex"
							@click.stop
							>
								<x-image :src="showImage(item, 'logo')" mode="widthFix" preview/>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { merchantInfo } from '@/api/merchant/merchant.js'
	export default {
		data() {
			return {
				infos: [
					{ labelKey: 'categoryType', label: '商家类型', key: 'categoryId' },
					{ labelKey: 'contactName', label: '联系人', key: '' },
					{ labelKey: 'idCardInfo', label: '身份信息', key: '', type: 'code' },
					{ labelKey: 'contactMethod', label: '联系方式', key: '', type: 'phone' },
					{ labelKey: 'certImgUrl', label: '营业执照', key: 'certImgUrl', type: 'more' },
					{ labelKey: 'environmentImgUrls', label: '营业环境照片', key: 'environmentImgUrls', type: 'more' },
				],
			}
		},
		computed: {
			environmentImgUrls() {
				console.log(this.shopInfo)
				let list = (this.shopInfo.environmentImgUrls || '').split(',') || []
				return list.filter(item => !!item)
			}
		},
		methods: {
			// 处理文本显示
			dealTextShow(item) {
				let { labelKey, key, type } = item
				let { idCardNumber, prefixCode, phone } = this.shopInfo
				if (key === 'categoryId') {
					let result = this.$store.state.common.shopCategory.find(item => item[key] === (this.shopInfo[key] || '')) || {}
					return result.title
				} else if (type === 'code') {
					idCardNumber = idCardNumber || ''
					return idCardNumber.slice(0, 3) + '****' + idCardNumber.slice(-3)
				} else if (type === 'phone') {
					return `+${ prefixCode || '' } ${ phone || '' }`
				} else {
					return this.shopInfo[key || labelKey]
				}
			},
			// 子项点击后
			infoClick(item) {
				if (item.type === 'more') {
					let list = (this.shopInfo[item.key] || '').split(',') || []
					this.previewImage(list.filter(_item => !!_item).map(_item => this.showImage(_item)))
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.info {
		position: relative;
		z-index: 0;
		&-mask {
			position: absolute;
			top: -10rpx;
			width: 100vw;
			height: 80rpx;
			background-color: #fc5457;
			
			&-box {
				position: absolute;
				top: 20rpx;
				width: 100vw;
				height: 80rpx;
				background-color: #FFFFFF;
				border-top-left-radius: 40rpx;
				border-top-right-radius: 40rpx;
				overflow: hidden;
			}
		}
	}
	.shop-avatar {
		width: 154rpx;
		height: 154rpx;
		background-color: #f9f9f9;
		border: 10rpx solid #FFFFFF;
		border-radius: 154rpx;
		overflow: hidden;
		transform: translateY(-10rpx);
	}
	.en-pic {
		margin-right: 18rpx;
		width: 240rpx;
		height: 138rpx;
		background-color: #f9f9f9;
		border-radius: 6rpx;
		overflow: hidden
	}
</style>
